<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>hello aaa</div>
    <script>
        // shadow
        // 通过fetch拿到内容
        let appContent = `<div id='qiankun'>
            <div>hello xxx</div>        
            <style>
                div{color:red}    
            </style>
        </div>`
        // 创建节点,将内容渲染进去
        const containerElement = document.createElement('div')
        containerElement.innerHTML = appContent
        // 拿到dom元素
        const appElement = containerElement.firstChild
        let html = appElement.innerHTML // 旧的内容 
        appElement.innerHTML = '' // 清空appElement里的旧内容
        // attachShadow是给当前元素添加shadow
        let shadow = appElement.attachShadow({ mode: 'open' }) // 外部可访问,close是无法访问
        shadow.innerHTML = html
        document.body.appendChild(appElement)
        // js沙箱 应用切换时,可能window会被污染
        // vue -> window.m-vue
        // react -> window.m-react
        // 此时可能react可以访问到m-vue 导致混乱
        // 所以需要对js进行隔离
    </script>
</body>

</html>